<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 100px auto;
            text-align: center;
        }
        
        table tr td {
            width: 100px;
            height: 50px;
            border: 1px solid black;
        }
        
        table thead {
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div class="box">
        <table>
            <thead>
                <tr>
                    <td></td>
                    <td>书籍名称</td>
                    <td>出版日期</td>
                    <td>价格</td>
                    <td>购物数量</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in books">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date}}</td>
                    <td>${{item.moeny}}</td>
                    <td><button v-on:click="down(index)">-</button>{{item.sum}}<button v-on:click="up(index)">+</button></td>
                    <td><button v-on:click="move(index)">操作</button></td>
                </tr>
                <tr>
                    <td v-if="isMsg" colspan="6">总价:{{totalSum}}</td>
                    <td v-else colspan="6">已经没货品了哦~~~~</td>
                </tr>
            </tbody>

        </table>
    </div>

</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    const app = new Vue({
        el: '.box',
        data: {
            books: [{
                name: '算法导论',
                date: '2005-5',
                moeny: 85,
                sum: 1,
            }, {
                name: 'JavaWeb',
                date: '2005-5',
                moeny: 110,
                sum: 1,
            }, {
                name: 'Springboot',
                date: '2005-5',
                moeny: 105,
                sum: 1,
            }, {
                name: 'Vue',
                date: '2005-5',
                moeny: 60,
                sum: 1,
            }],
            isMsg: true,
        },
        methods: {
            down: function(index) {
                if (this.books[index].sum == 1) {
                    this.books[index].sum = 1;
                } else {
                    this.books[index].sum--;
                }

            },
            up: function(index) {
                this.books[index].sum++;
            },
            move: function(index) {
                this.books.splice(index, 1);
                console.log(this.books.length);
                if (this.books.length == 0) {
                    this.isMsg = false;
                }
            }
        },
        computed: {
            totalSum: function() {
                //高端操作
                let Tsum = this.books.reduce((left, book) => {
                    return left + book.moeny * book.sum;
                }, 0);

                //普通操作
                // for (book of this.books) {
                // Tsum += book.moeny * book.sum;
                // }
                return '$' + Tsum;
            }
        },
    })



    let array = new Array(214, 25, 25, 523, 6523);

    let totalSum = array.filter((n) => {
        return n < 100;
    }).map((n) => {
        return n * 2;
    }).reduce((left, right) => {
        return left + right;
    }, 0);

    console.log(totalSum);
</script>

</html>